window.onload = function () {
    let welcome=document.getElementsByClassName("welcome")[0];
    let bookCondition=document.getElementsByClassName("book-condition")[0];
    let borrowed=document.getElementsByClassName("borrowed")[0];
    let borrowHobby=document.getElementsByClassName("borrow-hobby")[0];
    let borrowCar=document.getElementsByClassName("borrow-car")[0];
    let bookReturn=document.getElementsByClassName("book-return")[0];
    let information=document.getElementsByClassName("myInformation")[0];
    let rigisterSheet=document.getElementsByClassName("rigisterSheet")[0];
    let recommend=document.getElementsByClassName("recommend")[0];
    let donationBook=document.getElementsByClassName("donation-book")[0];
    let bookDistribution=document.getElementsByClassName("book-distribution")[0];
    let userGuide=document.getElementsByClassName("user-guide")[0];
    let link=document.querySelectorAll("a");
    let btn=document.querySelectorAll("button");
    //var username = prompt("输入您的用户名", "")
    // var username = lzc
    function clearAll(){
        welcome.style.display="none";
        bookCondition.style.display="none";
        borrowed.style.display="none";
        borrowHobby.style.display="none";
        borrowCar.style.display="none";
        bookReturn.style.display="none";
        information.style.display="none";
        rigisterSheet.style.display="none";
        recommend.style.display="none";
        donationBook.style.display="none";
        bookDistribution.style.display="none";
        userGuide.style.display="none";
    }
    link[1].onclick=function(){
        clearAll();
        bookCondition.style.display="block";
    }
    link[2].onclick=function(){
        clearAll();
        borrowed.style.display = "block";
        axios.post(
            'http://yuntenglibrary.natapp1.cc/borrowed',
            {
                userName:username
            }).then(response => {
                console.log(response)
                document.getElementById("demo10").innerHTML = response.data.borrowedbook
            })
    }
    link[3].onclick=function(){
        clearAll();
        borrowHobby.style.display="block";
    }
    link[4].onclick=function(){
        clearAll();
        borrowCar.style.display="block";
    } 
    link[5].onclick = function () {
        clearAll();
        bookReturn.style.display = "block";
        
        // axios.post(
        //     'http://yuntenglibrary.natapp1.cc/record',
        //     {
        //         username:username
        //     }
        // ).then(response => {
        //         console.log(response) 
        //         document.getElementById("return").innerHTML = response.data
        //     })
        
        // axios.request({
        //     method: 'GET',
        //     url: `http://yuntenglibrary.natapp1.cc/record/${username}`
        // }).then(response => {
        //     console.log(response)
        // })
    }
    link[7].onclick=function(){
        clearAll();
        rigisterSheet.style.display="block";
    }
    link[8].onclick=function(){
        clearAll();
        information.style.display="block";
    }
    link[9].onclick=function(){
        clearAll();
        recommend.style.display="block";
    }
    link[10].onclick=function(){
        clearAll();
        donationBook.style.display="block";
    }
    link[11].onclick=function(){
        clearAll();
        bookDistribution.style.display="block";
    }
    link[12].onclick=function(){
        clearAll();
        userGuide.style.display="block";
    }
    btn[0].onclick=function(){
        clearAll();
        welcome.style.display="block";
    }
//     document.querySelector('#navbar').addEventListener("click", function(e) {
// 		let event = e||window.event;
// 		let target = event.target||event.srcElement;
//         target.nextElementSibling.style.display = 'block';

// });




    const btns = document.querySelectorAll('button')
    var bott = document.getElementById("huoqu")
    bott.onclick = function () {
        clearAll();
        bookCondition.style.display = "block";
        axios.post(
            'http://yuntenglibrary.natapp1.cc/bookshelf',
            {
                userName:username
            }).then(response => {
                console.log(response)
                document.getElementById("demo8").innerHTML = response.data.bname
                document.getElementById("demo9").innerHTML = response.data.bstatus  
            })
    }
    //借阅申请
    var childStr = document.getElementById("bwbook").value
    // var childStr = document.getElementById("bwauthor").value
    // var childStr = document.getElementById("bwdate").value
    btns[1].onclick = function () {
        axios.post(
            'http://dgnrg4.natappfree.cc/mysql/adduser',
            {
                username:username,
                // :bwbook.va3lue
                // :bwauthor.value
                // :bwdate.value
            }).then(response => {
                console.log(response)
                alert("借阅成功!")
            })
    }
    //图书归还

    //个人信息完善
    var childStr = document.getElementById("name01").value
    var childStr = document.getElementById("classroom").value
    var childStr = document.getElementById("username").value
    var childStr = document.getElementById("sex").value
    var childStr = document.getElementById("qq").value
    var childStr = document.getElementById("weichat").value
    var childStr = document.getElementById("hobbit").value
    var childStr = document.getElementById("rdhobby").value
    btns[3].onclick = function () {
        if (classroom.value == "") {
            alert("班级不能为空")
        }
        if (name01.value == "") {
            alert("姓名不能为空")
        }
        if (username.value == "") {
            alert("用户名不能为空")
        }
        if (性别.value == "") {
            alert("性别不能为空")
        }
        axios.post(
            'http://dgnrg4.natappfree.cc/mysql/adduser',
            {
                username:username,
                name01:name01.value,
                class:classroom.value,
                gender:sex.value,
                qq:qq.value,
                wechat:weichat.value,
                hobby:hobbit.value,
                reading_interest:rdhobby.value
            }).then(response => {
                console.log(response)
                alert("信息提交成功!")
            })
    }

    //打印
    var childStr = document.getElementById("username02").value
    btns[4].onclick = function () { 
        alert(username)
        axios.post(
            'http://dgnrg4.natappfree.cc/mysql/getuser',
            {
                username:username
            }).then(response => {
                console.log(response)
                document.getElementById("demo1").innerHTML = response.data.classroom
                document.getElementById("demo2").innerHTML = response.data.gender
                document.getElementById("demo3").innerHTML = response.data.hobby
                document.getElementById("demo4").innerHTML = response.data.name
                document.getElementById("demo5").innerHTML = response.data.qq
                document.getElementById("demo6").innerHTML = response.data.reading_interest
                document.getElementById("demo7").innerHTML = response.data.wechet
                //alert(JSON.parse(response.data).classroom)
            })
    }





    
    let chartDom = echarts.init(document.getElementsByClassName('sheet')[0]);
    let option;
    let options;
    let chartdoms=echarts.init(document.getElementsByClassName('sheet')[1]);
    chartDom.resize({
        width: 480,
        height: 250
      });
    chartdoms.resize({
        width: 480,
        height: 250
    })
    option = {
        xAxis: {
        type: 'category',
        name: '月份',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '九月','十月','十一月']
        },
        yAxis: {
        type: 'value',
        name: '借阅量'
        },
        series: [
        {
              data: [20, 17, 15, 18, 14, 11, 13,10,12],
              type: 'bar'
        }
        ],
    },
    options = {
        xAxis: {
        type: 'category',
        name: '月份',
        data: ['Java', 'Python', 'C语言', 'web']
        },
        yAxis: {
        type: 'value',
        name: '借阅类型'
        },
        series: [
        {
              data: [20, 15, 18, 11],
              type: 'bar'
        }
        ],
    },
    chartDom.setOption(option);
    chartdoms.setOption(options);

}